<template>
  <div class="nav_tabs_item px-20 py-20">
    <div class="title">
      {{ itemInfo.title }}
    </div>
    <div class="flex_space-around">
      <div class="item_left_info">{{ itemInfo.num }}</div>
      <div class="item_left_img">
        <svg-icon :icon-class="itemInfo.svgUrl" class="icon" />
      </div>
    </div>
  </div>
</template>

<script setup>
const props=defineProps({
  itemInfo: {
      type: Object,
      default: () => {
        return {
          title: '未定义标题',
          num: '1111',
          svgUrl: '未定义svgUrl'
        }
      }
    }
})
</script>

<style lang="scss" scoped>
@import "./nav_tabs.scss";
  .nav_tabs_item{
    width: 332px;
    height: 128px;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.03);
    border-radius: 20px;

    .title{
      font-size: 18px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #1A1A1A;
      line-height: 27px;
    }

    .item_left_info{
      font-size: 36px;
      font-family: ACaslonPro-Bold, ACaslonPro;
      font-weight: bold;
      color: #1A1A1A;
      line-height: 43px;
      letter-spacing: 3px;
    }
  }
</style>
